﻿<template>
    <div>
        <div class="layout-main">
            <el-form ref="storageBill" label-position="left" label-width="120px" :model="storageBill">
                <input type="hidden" :model="storageBill.id" />
                <el-form-item label="客户选择" prop="toPartnerId" :rules="[{required:true,message:'备注客户选择不能为空', trigger: 'blur'}]">
                    <el-select size="small" v-model="storageBill.toPartnerId" placeholder="客户选择" style="width: 240px">
                        <el-option v-for="partner in disPartners" :value="partner.id" :key="partner.id" :label="partner.name">
                            {{partner.name}}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="收货人地址" prop="reciveraddress">
                    <el-input size="small" v-model="storageBill.reciveraddress" placeholder="收货人地址" style="width: 240px" />
                </el-form-item>
                <el-form-item label="收货人" prop="recivername">
                    <el-input size="small" v-model="storageBill.recivername" placeholder="收货人" style="width: 240px" />
                </el-form-item>
                <el-form-item label="收货人电话" prop="reciverphone">
                    <el-input size="small" v-model="storageBill.reciverphone" placeholder="收货人电话" style="width: 240px" />
                </el-form-item>
                <el-form-item label="备注" prop="remark" :rules="[{required:true,message:'备注不能为空', trigger: 'blur'}]">
                    <el-input size="small" v-model="storageBill.remark" placeholder="备注" style="width: 240px" />
                </el-form-item>
            </el-form>
            <el-divider>商品选择</el-divider>
            <el-form ref="el-form-item" label-width="80px" :inline="true" :model="item">
                <el-form-item prop="productId">
                    <el-select size="small" style="width: 280px" @change="changeProduct" clear="item={productId:null}" clearable :loading="searchLoading" placeholder="可输入、sku码 进行搜索" filterable remote :remote-method="remoteMethod" v-model="item.productId">
                        <el-option v-for="(product,ind) in products" :key="product.id"  :value="product.id">
                            <span style="float: right;color: #8492a6; font-size: 13px">{{product.variationName}}</span>
                            <span style="float: left;">skuCode:{{product.skuCode }}</span>
                            <span style="float: left;" class="state-error">{{product.newSkuCode }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="quantity" :rules="[{required:true,message:'入库数量不能为空', trigger: 'blur'}]">
                    <el-input size="small" type="number" v-model="item.quantity" placeholder="商品数量>0" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="submitForm('el-form-item')">添加</el-button>
                    <el-upload :data="extData" :before-upload="beforeCallback" :on-progress="progressCallback" :on-success="successCallback" style="float: right;margin-left: 20px;" :show-file-list="false" :on-error="errorCallback" class="upload-demo" :action="uploadurl" ref="upload">
                        <el-button size="small" type="success">批量Excel导入</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item> <span @click="showText=!showText">批量输入<i class="el-icon-arrow-right" /></span>
                </el-form-item>
            </el-form>
            <el-form :inline="true" ref="itemForm" :model="storageBill">
                <el-table :data="storageBill.itemList" stripe style="width: 100%">
                    <el-table-column prop="boxNo" label="序号" width="120">
                        <template slot-scope="scope">
                            {{scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="图片" width="120">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.thumb" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="商品名称" width="180">
                    </el-table-column>
                    <el-table-column prop="variationName" label="商品规格" width="180">
                    </el-table-column>
                    <el-table-column prop="skuCode" label="sku编码" width="180">
                    </el-table-column>
                    <el-table-column prop="quantity" label="数量" width="120">
                        <template slot-scope="scope">
                            <el-form-item :rules="[{required:true,message:'数量不能为空'}]" :prop="'itemList.' + scope.$index + '.quantity'">
                                <el-input size="small" v-model="scope.row.quantity"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="操作">
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-button size="small" @click.prevent="removeDomain(scope.row)">删除</el-button>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div style="margin-top: 20px;text-align: center;">
                <el-button size="small" @click="cancel">取消</el-button>
                <el-button size="small" type="primary" :loading="modalLoading" @click="ok(0)">确定并返回</el-button>
                <el-button size="small" type="primary" :loading="modalLoading" @click="ok(1)">确定继续新订单</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import api from "@/api/api"
import { doTradeCreate } from "@/api/TradeApi"
import { searchProductList } from "@/api/ProductApi"
import { getPartnerList } from "@/api/TradeApi"
export default {
    name: 'DisTrade',
    data() {
        return {
            showText: false,
            loading: false,
            modalLoading: false,
            disTrade: {},
            disTradeId: null,
            extData: {
                sessionKey: localStorage.getItem('sessionKey'),
                token: localStorage.getItem('token')
            },
            uploadurl: api.uploadTradeUrl,
            searchLoading: false,
            loadingWarehouse: false,
            modalLoading: false,
            others: {

            },
            disPartners: [],
            products: [],

            item: {

                productName: null, //货号
                productId: null, //實際id
                skuCode: null, //sku码
                quantity: null
            },
            storageBill: {
                remark: "",
                toParnterId: null,
                itemList: [],
                counter: 0
            }


        }
    },
    mounted: function() {
        this.disTradeId = this.$route.params.disTradeId;
        this.getDetail();
        this.getPartners();
    },
    methods: {
        getPartners() {
            var me = this;
            var params = {};
            params.current = 1;
            params.pageSize = 100;
            me.loading = true;
            getPartnerList(params).then(response => {
                var body = response;
                if (body.status == 0) {

                    me.disPartners = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        remoteMethod(query) {

            if (query != '') {
                this.loading = true;
            }
            var me = this;
            me.searchLoading = true;
            searchProductList({ skuCode: query }).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.products = body.obj;
                }
                me.searchLoading = false;

            }, response => {
                me.searchLoading = false;
            });

        },
        errorCallback: function(file) {
            this.hideLoading();
            this.errorMessage("上传失败！");
        },
        beforeCallback: function() {

            this.showLoading();
        },
        progressCallback: function() {

        },
        successCallback: function(body, file, fileList) {
            var me = this;
            me.hideLoading();

            if (body.status == 0) {
                body.obj.forEach((titem, ind) => {
                    let it = {
                        productName: titem.productName,
                        variationName: titem.variationName,
                        skuCode: titem.skuCode,

                        quantity: titem.quantity,
                        thumb: titem.imgurl,

                        width: titem.width,
                        height: titem.height,
                        length: titem.length,
                        quantity: titem.quantity,
                        productId: titem.productId,
                        productSkuPriceId: titem.productSkuPriceId,
                        partnerProductSkuId: titem.partnerProductSkuId
                    };
                    this.storageBill.itemList.push(it);
                });
            } else {
                this.errorMessage(body.info);
            }
        },
        getDetail: function() {
            if (this.disTradeId == null || this.disTradeId == undefined || this.disTradeId == "") return;
            var me = this;
            me.showLoading();
            me.$http.post("/sys/distrade/show_" + me.disTradeId + ".action").then(response => {
                var body = response;
                if (body.status == 0) {
                    me.disTrade = body.obj;

                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        },
        changeProduct: function(pr) {
            //商品选择
            var me = this;
            me.products.forEach((dt, ind) => {

                if (pr == dt.id) {

                    me.item.skuCode = dt.skuCode;
                    me.item.productName = dt.productName;
                    me.item.variationName = dt.variationName;

                    me.item.thumb = dt.imgurl;
                    me.item.salePrice = dt.saleprice;
                    me.item.productId = dt.productId;
                    me.item.productSkuPriceId = dt.productSkuPriceId;
                    me.item.parnterProductSkuId = dt.parnterProductSkuId;
                }
            });
        },
        removeDomain: function(it) {
            var index = this.storageBill.itemList.indexOf(it)
            if (index !== -1) {
                this.storageBill.itemList.splice(index, 1)
            }
        },

        submitForm(formName) {
            var me = this;
            if (!me.item.productId) {
                me.errorMessage("请先选择商品");
                return false;
            }
            if (!me.item.quantity) {
                me.errorMessage("请输入商品数量");
                return false;
            }
            let it = {
                productName: me.item.productName,
                skuCode: me.item.skuCode,
                variationName: me.item.variationName,
                productId: me.item.productId,
                thumb: me.item.thumb,
                quantity: me.item.quantity,
                productSkuPriceId: me.item.productSkuPriceId,
                partnerProductSkuId: me.item.partnerProductSkuId,

            };
            //判断是否重复的Id
            this.storageBill.itemList.push(it);
            this.item = {
                productName: null, //货号
                productId: null, //實際id
                skuCode: null, //sku码
                quantity: null,
                thumb: null,
                variationName: null
            };

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        ok: function(state) {
            this.$refs['storageBill'].validate((valid) => {

                if (valid) {

                    this.$refs['itemForm'].validate((svalid) => {
                        if (svalid) {
                            this.okSubmit(state);
                        } else {
                            this.errorMessage('请认真填写数据');
                        }
                    });

                } else {
                    this.errorMessage('请认真填写数据');
                }
            });
        },
        cancel: function() {
            if (this.disTradeId == null || this.disTradeId == undefined || this.disTradeId == "") {
                this.$router.push({ name: "DisTradeList" })
            } else {
                this.getDetail();
            }
        },
        okSubmit(state) {
            if (this.storageBill.itemList.length <= 0) {

                this.errorMessage("请先选择下单的商品")
                return;
            }
            var me = this;

            me.modalLoading = true;
            let data = JSON.stringify(me.storageBill);
            doTradeCreate({ data: data }).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("提交成功！");
                    me.modalEdit = false;
                    if (state == 0) {
                        me.$router.push({ name: "DisTradeList" });
                    } else {
                        //10月30日
                        me.storageBill.itemList=[];
                        me.storageBill.counter=0;
                    }

                } else {
                    me.errorMessage(body.info);
                }
                me.modalLoading = false;
            }, response => {
                me.modalLoading = false;
            });
        }
    }
}
</script>
<style scoped>
</style>